<template>
  <div>
    <!-- BLOG PAGE CONTENT
            ============================================= -->
    <section id="blogBBSDetail">
      <div id="single-blog-page" class="blog-page py-3">
        <div class="container">
          <div class="row">
            <!-- SINGLE POST -->
            <div class="col-lg-8">
              <div class="post-holder pr-0 pr-lg-5">
                <div class="blog-post">
                  <!-- BLOG POST IMAGE -->
                  <div class="blog-post-img mb-3">
                    <img
                      class="img-fluid w-100"
                      src="../../assets/img/blog/blog-img-02.jpg"
                      alt="blog-post-image"
                    />
                  </div>

                  <!-- BLOG POST TEXT -->
                  <div class="sblog-post-txt mb-2">
                    <!-- Post Data -->
                    <p class="post-meta">
                      July 05, 2021
                      <span class="base-color">in Web Design</span>
                    </p>

                    <!-- Post Title -->
                    <h4 class="mb-3">
                      Turpis quaerat sodales nemo ipsam egestas volute sapien
                      vitae
                    </h4>

                    <!-- Post Text -->
                    <p class="text-muted">
                      Aliqum mullam blandit tempor sapien gravida donec ipsum,
                      at porta justo. Velna vitae auctor congue magna nihil
                      impedit ligula risus. Mauris donec ociis et magnis sapien
                      etiam sapien sem sagittis congue tempor gravida donec enim
                      ipsum porta justo integer at odio velna congue integer...
                    </p>

                    <!-- Text -->
                    <p class="text-muted">
                      Sagittis congue augue egestas volutpat egestas magna
                      suscipit egestas magna ipsum vitae purus efficitur ipsum
                      primis in cubilia laoreet augue egestas luctus donec diam.
                    </p>

                    <!-- Small Title -->
                    <h5 class="mb-3">
                      Semper lacus cursus porta, feugiat primis
                    </h5>

                    <!-- List -->
                    <ul class="content-list mb-3">
                      <li>
                        <i class="lni-check-mark-circle"></i> An enim nullam
                        tempor sapien gravida enim ipsum blandit porta justo
                      </li>

                      <li>
                        <i class="lni-check-mark-circle"></i>Quisque lobortis
                        nulla, lacerat iaculis tempus massa
                      </li>

                      <li>
                        <i class="lni-check-mark-circle"></i>Congue magna at
                        pretium purus pretium ligula luctus ligula nisl
                      </li>

                      <li>
                        <i class="lni-check-mark-circle"></i>Neque turpis vitae
                        eros praesent varius. Egestas pellentesque urna
                      </li>
                    </ul>

                    <!-- Text -->
                    <p class="text-muted">
                      At sagittis congue augue egestas egestas magna ipsum vitae
                      purus ipsum primis in cubilia laoreet augue egestas luctus
                      donec diam ociis ultrice ligula magna suscipit lectus
                      gestas
                    </p>
                  </div>

                  <!-- POST SHARE ICONS -->
                  <div class="py-3">
                    <h6>Share:</h6>
                    <ul class="share-social-icons clearfix">
                      <li>
                        <a href="#" class="share-ico ico-facebook"
                          ><i class="lni-facebook-filled"></i
                        ></a>
                      </li>
                      <li>
                        <a href="#" class="share-ico ico-twitter"
                          ><i class="lni-twitter-filled"></i
                        ></a>
                      </li>
                      <li>
                        <a href="#" class="share-ico ico-google-plus"
                          ><i class="lni-google-plus"></i
                        ></a>
                      </li>
                      <li>
                        <a href="#" class="share-ico ico-linkedin"
                          ><i class="lni-instagram-filled"></i
                        ></a>
                      </li>
                    </ul>
                  </div>
                  <!-- END POST SHARE ICONS -->

                  <hr />

                  <!-- RELATED POSTS -->
                  <div id="blog" class="related-post py-5">
                    <!-- Title -->
                    <h4 class="mb-5">相关文章</h4>

                    <div class="row">
                      <!-- RELATED POST #1 -->
                      <div class="col-md-6 mt-4">
                        <!-- BLOG POST IMAGE -->
                        <div class="rounded blog-item">
                          <div class="image-blog">
                            <img
                              src="../../assets/img/blog/blog-img-01.jpg"
                              alt="/"
                              class="rounded-top"
                            />
                          </div>

                          <div
                            class="rounded-bottom blog-content p-4 text-center"
                          >
                            <div class="blog-section-author">
                              <span> Posted by:<a href="#"> Admin </a> </span>
                              |
                              <span> 25th June, 2021</span>
                            </div>

                            <h5>
                              <a
                                href="blog-single-01.html"
                                target="_blank"
                                class="text-dark"
                                >How to become a successful businessman.</a
                              >
                            </h5>
                            <div class="blog-link mt-4">
                              <a
                                class="btn btn-sm"
                                href="blog-single-01.html"
                                target="_blank"
                                >Read More</a
                              >
                            </div>
                          </div>
                        </div>
                      </div>

                      <!-- RELATED POST #2 -->
                      <div class="col-md-6 mt-4">
                        <!-- BLOG POST IMAGE -->
                        <div class="rounded blog-item">
                          <div class="image-blog">
                            <img
                              src="../../assets/img/blog/blog-img-03.jpg"
                              alt="/"
                              class="rounded-top"
                            />
                          </div>
                          <div
                            class="rounded-bottom blog-content p-4 text-center"
                          >
                            <div class="blog-section-author">
                              <span> Posted by:<a href="#"> Admin </a> </span>
                              |
                              <span> 25th June, 2021</span>
                            </div>

                            <h5>
                              <a
                                href="blog-single-01.html"
                                target="_blank"
                                class="text-dark"
                                >5 Tips to help you in mountain trip</a
                              >
                            </h5>
                            <div class="blog-link mt-4">
                              <a
                                class="btn btn-sm"
                                href="blog-single-01.html"
                                target="_blank"
                                >Read More</a
                              >
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- End row -->
                  </div>
                  <!-- END RELATED POSTS -->

                  <!-- POST COMMENTS -->
                  <div class="single-post-comments py-5">
                    <!-- Title -->
                    <h4>评论</h4>

                    <!-- COMMENT #1 -->
                    <div class="media mt-4">
                      <!-- Comment-1 Avatar -->
                      <img
                        class="mr-3"
                        src="../../assets/img/client/client-03.jpg"
                        alt="comment-avatar"
                      />

                      <div class="media-body">
                        <!-- Comment-1 Meta -->
                        <div class="comment-meta">
                          <h5 class="mt-0">Jeffrey</h5>
                          <span class="comment-date"
                            >July 08, 2021 at 7:14 pm -
                          </span>
                          <span class="btn-reply"
                            ><a href="#leave-comment" class="internal-link"
                              >reply</a
                            ></span
                          >
                        </div>

                        <!-- Comment-1 Text -->
                        <p>
                          Etiam sapien sem magna at vitae pulvinar congue augue
                          egestas pretium neque id viverra suscipit egestas
                          magna porta ratione, mollis risus lectus
                        </p>

                        <hr />

                        <!-- COMMENT #2 -->
                        <div class="media mt-3">
                          <!-- Comment-2 Avatar -->
                          <a href="#" class="pr-3">
                            <img
                              src="../../assets/img/client/client-01.jpg"
                              alt="comment-avatar"
                            />
                          </a>

                          <div class="media-body">
                            <!-- Comment-2 Meta -->
                            <div class="comment-meta">
                              <h5 class="mt-0">Admin</h5>
                              <span class="comment-date"
                                >July 28, 2021 at 11:35 pm -
                              </span>
                              <span class="btn-reply"
                                ><a href="#leave-comment" class="internal-link"
                                  >reply</a
                                ></span
                              >
                            </div>

                            <!-- Comment-2 Text -->
                            <p>
                              Etiam sapien sem magna at vitae pulvinar congue
                              augue egestas pretium neque id
                            </p>
                          </div>
                        </div>
                        <!-- END COMMENT #2 -->
                      </div>
                    </div>
                    <!-- END COMMENT #1 -->

                    <hr />

                    <!-- COMMENT #3 -->
                    <div class="media mt-4">
                      <!-- Comment-4 Avatar -->
                      <img
                        class="mr-3"
                        src="../../assets/img/client/client-02.jpg"
                        alt="comment-avatar"
                      />

                      <div class="media-body">
                        <!-- Comment-4 Meta -->
                        <div class="comment-meta">
                          <h5 class="mt-0">Samantha</h5>
                          <span class="comment-date"
                            >June 29, 2021 at 5:41 pm -
                          </span>
                          <span class="btn-reply"
                            ><a href="#leave-comment" class="internal-link"
                              >reply</a
                            ></span
                          >
                        </div>

                        <!-- Comment-4 Text -->
                        <p>
                          Porta ratione, mollis risus lectus porta rutrum arcu
                          aenean primis in augue luctus neque purus ipsum neque
                          dolor primis libero tempus, tempor posuere ligula
                        </p>
                      </div>
                    </div>
                    <!-- END COMMENT #3 -->

                    <!-- COMMENT #4 -->
                    <div class="media mt-4">
                      <!-- Comment-4 Avatar -->
                      <img
                        class="mr-3"
                        src="../../assets/img/client/client-03.jpg"
                        alt="comment-avatar"
                      />

                      <div class="media-body">
                        <!-- Comment-4 Meta -->
                        <div class="comment-meta">
                          <h5 class="mt-0">Robert Peterson</h5>
                          <span class="comment-date"
                            >June 11, 2021 at 11:19 am -
                          </span>
                          <span class="btn-reply"
                            ><a href="#leave-comment" class="internal-link"
                              >reply</a
                            ></span
                          >
                        </div>

                        <!-- Comment-4 Text -->
                        <p>
                          Etiam sapien sem magna at vitae pulvinar congue augue
                          egestas pretium neque id viverra suscipit egestas
                          magna porta ratione, mollis risus
                        </p>
                      </div>
                    </div>
                    <!-- END COMMENT #4 -->
                  </div>
                  <!-- END POST COMMENTS -->

                  <!-- COMMENT FORM -->
                  <div id="leave-comment" class="contact py-5">
                    <!-- Title -->
                    <h4>发表评论</h4>

                    <!-- Text -->
                    <p>您的信息不会被公开,将加以保护隐私</p>

                    <!-- Comment Form Inputs -->
                    <form id="contactForm" class="contact-form form mt-2">
                      <div class="row">
                        <div class="col-lg-12 form-item">
                          <div class="form-group">
                            <p>姓名</p>
                            <input
                              name="name"
                              id="name"
                              type="text"
                              class="form-control"
                              placeholder="你的姓名*"
                              required
                            />
                          </div>
                        </div>
                        <div class="col-lg-12 form-item">
                          <div class="form-group">
                            <p>邮件</p>
                            <input
                              name="email"
                              id="email"
                              type="email"
                              class="form-control"
                              placeholder="电子邮件*"
                              required
                            />
                          </div>
                        </div>
                        <div class="col-12 form-item">
                          <div class="form-group">
                            <p>内容</p>
                            <textarea
                              name="comments"
                              id="comments"
                              rows="5"
                              class="form-control h-auto"
                              placeholder="评论内容..."
                            ></textarea>
                          </div>
                        </div>
                        <div class="col-sm-12 text-left">
                          <button
                            type="button"
                            class="btn btn-purple"
                            id="submit-btn"
                            onClick="sendEmail()"
                          >
                            点击发送
                          </button>
                          <div
                            id="message"
                            class="toast shadow-none main-btn bg-transparent"
                            role="alert"
                            aria-live="assertive"
                            aria-atomic="true"
                            data-delay="4000"
                          >
                            <div class="toast-body d-inline-block"></div>
                            <button
                              type="button"
                              class="pr-3 close"
                              data-dismiss="toast"
                              aria-label="Close"
                            >
                              <span aria-hidden="true" class="lni-close"></span>
                            </button>
                          </div>
                        </div>
                      </div>
                    </form>
                    <!-- End form -->
                  </div>
                  <!-- END COMMENT FORM -->
                </div>
                <!-- END BLOG POST -->
              </div>
            </div>
            <!-- END SINGLE POST -->

            <!-- SIDEBAR RIGHT
                        ============================================= -->
            <aside id="sidebar-right" class="col-lg-4">
              <div class="pl-0 pl-lg-5">
                <!-- Search Field -->
                <div id="search-field" class="sidebar-div mb-5">
                  <div class="input-group mb-3">
                    <input
                      type="text"
                      class="form-control"
                      placeholder="搜索内容"
                      aria-label="Search"
                      aria-describedby="search-field"
                    />
                    <div class="input-group-append">
                      <i class="lni-search" aria-hidden="true"></i>
                    </div>
                  </div>
                </div>

                <!-- Blog Categories -->
                <div id="blog-cat" class="sidebar-div mb-4">
                  <!-- Title -->
                  <h5>热点</h5>

                  <ul class="blog-category-list clearfix">
                    <li>
                      <a href="#" title="">
                        <i class="lni-chevron-right" aria-hidden="true"></i
                        >医学著作</a
                      >
                      <span>(5)</span>
                    </li>
                    <li>
                      <a href="#" title=""
                        ><i class="lni-chevron-right" aria-hidden="true"> </i
                        >新冠热点</a
                      >
                      <span>(13)</span>
                    </li>
                    <li>
                      <a href="#" title=""
                        ><i class="lni-chevron-right" aria-hidden="true"> </i
                        >今日头条</a
                      >
                      <span>(6)</span>
                    </li>
                    <li>
                      <a href="#" title=""
                        ><i class="lni-chevron-right" aria-hidden="true"> </i
                        >公告</a
                      >
                      <span>(12)</span>
                    </li>
                  </ul>
                </div>

                <!-- Most Popular Posts -->
                <div id="popular-posts" class="sidebar-div mt-5">
                  <!-- Title -->
                  <h5 class="mb-2">热门讨论</h5>

                  <ul class="popular-posts mt-4">
                    <!-- Popular post #1 -->
                    <li class="clearfix d-flex align-items-center">
                      <!-- Image -->
                      <img
                        class="img-fluid"
                        src="../../assets/img/22.jpg"
                        alt="blog-post-preview"
                      />

                      <!-- Text -->
                      <div class="post-summary">
                        <a href="blog-single-01.html" class="rose-hover"
                          >Etiam sapien accumsan molestie ante empor ...</a
                        >
                        <p>43 Comments</p>
                      </div>
                    </li>

                    <!-- Popular post #2 -->
                    <li class="clearfix d-flex align-items-center">
                      <!-- Image -->
                      <img
                        class="img-fluid"
                        src="../../assets/img/23.jpg"
                        alt="blog-post-preview"
                      />

                      <!-- Text -->
                      <div class="post-summary">
                        <a href="blog-single-01.html" class="rose-hover"
                          >Blandit tempor sapien ipsum, porta justo ...</a
                        >
                        <p>38 Comments</p>
                      </div>
                    </li>

                    <!-- Popular post #3 -->
                    <li class="clearfix d-flex align-items-center">
                      <!-- Image -->
                      <img
                        class="img-fluid"
                        src="../../assets/img/24.jpg"
                        alt="blog-post-preview"
                      />

                      <!-- Text -->
                      <div class="post-summary">
                        <a href="blog-single-01.html" class="rose-hover"
                          >Cursus risus laoreet turpis auctor varius ...</a
                        >
                        <p>29 Comments</p>
                      </div>
                    </li>
                  </ul>
                </div>

                <!-- Popular Tags -->
                <div id="popular-tags" class="sidebar-div mt-5">
                  <!-- Title -->
                  <h5 class="mt-4">热门标签</h5>

                  <span class="badge"><a href="#">video</a> 3</span>
                  <span class="badge"><a href="#">web</a> 17</span>
                  <span class="badge"><a href="#">music</a> 2</span>
                  <span class="badge"><a href="#">design</a> 54</span>
                  <span class="badge"><a href="#">image</a> 46</span>
                  <span class="badge"><a href="#">typography</a> 6</span>
                  <span class="badge"><a href="#">journal</a> 9</span>
                  <span class="badge"><a href="#">graphic</a> 32</span>
                  <span class="badge"><a href="#">photo</a> 67</span>
                  <span class="badge"><a href="#">photoshop</a> 26</span>
                </div>
              </div>
            </aside>
            <!-- END SIDEBAR RIGHT -->
          </div>
          <!-- End row -->
        </div>
        <!-- End container -->
      </div>
      <!-- END BLOG PAGE CONTENT -->
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style>
#blogBBSDetail {
  margin-top: 120px;
}
#blogBBSDetail #blogBBSBody #search-field .form-control {
  border-radius: 10px;
  box-shadow: none;
}
#blogBBSDetail #search-field .form-control {
  border-radius: 10px;
  box-shadow: none;
}
#blogBBSDetail #search-field .input-group {
  position: relative;
}
#blogBBSDetail #search-field .input-group-append {
  position: absolute;
  right: 10px;
  top: calc(0.75em + 0.325rem + 1px) ;
  z-index: 100;
}
</style>
